<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/login.css">
    <script src="./js/utils.js"></script>
    <script src="./js/jquery.js"></script>
    <script src="./js/js/layer/layer.js"></script>
</head>

<body>
    <div class="head">
        <a href="./首页.html"> <img src="./images/logo-icon.png" alt=""></a>
    </div>
    <div class="banner"><img src="./images/banner1.jpg" alt="">

        <form action="">
            <div class="box">
                <div class="txt">
                    <span class=" active">会员登录</span>
                    <span> | &nbsp;扫码登录</span>
                </div>
                <ul class=" active1">
                    <input type="text" name="name" placeholder="手机号码" class="tel1 ">
                    <input type="text" name="code" placeholder="请输入图形验证码" class="main">
                    <span class="txt4"></span>
                    <span> </span>
                    <input type="text" name="tel" placeholder="短信验证码" class="main">
                    <p class="txt3">获取验证码</p>
                    <button>立即登录</button>

                    <a href="./reg.html">
                        <p class="txt5">免费注册</p>
                    </a>

                    <h3><span>账号和密码&nbsp;|&nbsp;社交登录</span></h3>
                </ul>



                <ul>
                    <li><img src="./images/ewm11.png" alt=""></li>
                    <p class="txt7">使用万表APP扫码登录
                        在首页顶部搜索栏点击扫一扫</p>

                    <h2>下载万表app</h2>
                </ul>

            </div>

            <!--     <ul>
                    <li><img src="./images/ewm11.png" alt=""></li>
                    <p class="txt7">使用万表APP扫码登录
                        在首页顶部搜索栏点击扫一扫</p>

                    <h2>下载万表app</h2>
                </ul> -->








    </div>

    <!--     <ul>
                    <li><img src="./images/ewm11.png" alt=""></li>
                    <p class="txt7">使用万表APP扫码登录
                        在首页顶部搜索栏点击扫一扫</p>

                    <h2>下载万表app</h2>
                </ul> -->







    </form>


    </div>
</body>

</html>

<script>
    var oUpLis = document.querySelectorAll(".txt span");
    var oMains = document.querySelectorAll("ul ");
    var oH3 = document.querySelector("h3")
    for (var i = 0; i < oUpLis.length; i++) {
        oUpLis[i].tempIndex = i;
        oUpLis[i].onclick = function () {
            //点击后,排他,遍历清除所有的 active类名称
            for (var j = 0; j < oUpLis.length; j++) {
                oUpLis[j].className = " ";
                oMains[j].className = " ";
            }
            this.className = " active";
            //下标对应
            oMains[this.tempIndex].className = "active1"
        }
    }

    var oShowCode = document.querySelector(".txt4")
    var oForm = document.forms[0];
    var ValidateObj = {


        codeFlag: false
    }
    window.onload = function () {
        let code = Utils.randomCode();
        oShowCode.innerHTML = code
        oShowCode.setAttribute("txt4", code);

        oShowCode.onclick = function () {
            let code = Utils.randomCode();
            oShowCode.innerHTML = code
            oShowCode.setAttribute("txt4", code);
        }
    }
    /*  oForm.onsubmit = function () {  
 
 
 
         //1.获取本地数据
         var oUserList = JSON.parse(localStorage.getItem("users") || '[]');
         //2.用户名和密码
         var oUser = {
             name: this.naem.value,
 
         } */
    /*  //3. 比较
     var isLogin = false; //默认登录失败
     for (var i = 0; i < oUserList.length; i++) {
         if (oUserList[i].phone === oUser.name) {
             isLogin = true;
             break;
         }
     }

     //4. 如果存在,就把当前用户信息,保存到
     //sessionStorage
     if (isLogin) {
         sessionStorage.setItem("token", JSON.stringify(oUser));
         alert("登录成功!")
         location = "./首页.html ";
     } else {
         alert("用户名或密码错误!")
     }
     return false;
 } */



    $(function () {





        $("form").on("submit", function () {

            $.ajax({
                url: "/account/login",
                type: "post",
                data: {
                    name: $(".tel1").val()
                }


            }).then(function (res) {
                console.log(res);
                let { msg, code, data } = res;

                if (code == 200) {
                    localStorage.setItem("userinfo", JSON.stringify(data))
                    location = "index.html"
                }

                layer.msg(msg);
                // layer.alert("你好丑")
                // layer.confirm("确定要删除吗?", {
                //     icon: 0,
                //     btn: ["确定", "取消"]
                // }, function (index) {
                //     console.log("ok");
                //     layer.close(index);
                // }, function () {

                // })
            })

            return false;//阻止默认行为
        })

    })



</script>